<template>

    <el-dialog :title="form.question_id ? '编辑试题' : '新增试题'" style="width: 592px;" modal-class="dialog-add"
        v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
        <!--form表单-->
        <el-form size="small" :inline="true" ref="form" :label-width="formLabelWidth" :model="form" :rules="formRules">
            <el-form-item label="题目类型" prop="question_type">
                <el-select size="small" style="width: 181px;" ref="question_type" @change="typeChange"
                    v-model="form.question_type" placeholder="请选择">
                    <el-option v-for="(item, index) in optionList" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属大纲" prop="outline_id">
                <el-cascader v-model="form.outline_id" ref="outline_id"
                    :props="{ checkStrictly: true, label: 'title', value: 'id' }" :options="treeData"></el-cascader>
            </el-form-item>
            <el-form-item label="分类" prop="category_id">
                <el-select size="small" style="width: 181px;" ref="category_id" v-model="form.category_id"
                    placeholder="请选择">
                    <el-option label="普通题" :value="1"></el-option>
                    <el-option label="真题" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目内容" prop="title">
                <el-input style="width: 450px;" v-model="form.title" placeholder="请输入" type="textarea" />
            </el-form-item>
            <div class="inline"></div>
            <el-form-item label=" ">
                <el-button size="small"
                    :disabled="(form.question_type === 1 || form.question_type === 2) && tableData.length >= 10 || form.question_type === 3"
                    @click="addClick">添加选项</el-button>
            </el-form-item>
            <el-form-item style="width: 518px;" label="题目选项">
                <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
                    <el-table-column min-width="60" align="center" prop="title" label="选项">
                        <template #default="scope">
                            <el-radio v-if="form.question_type === 1 || form.question_type === 3" v-model="radios"
                                :label="tableType[scope.$index]"><span>{{ tableType[scope.$index] }}</span></el-radio>
                            <el-checkbox v-model="scope.row.isSelect" v-else>{{ tableType[scope.$index] }}</el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" align="center" prop="content" label="内容(选中选项即设置为答案)">
                        <template #default="scope">
                            <el-input class="ww100 tabInput" :disabled="form.question_type === 3" maxlength="50"
                                v-model="scope.row.content" placeholder="请输入" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="80">
                        <template #default="scope">
                            <el-button @click="deleteClick(scope)" type="text" :disabled="form.question_type === 3"
                                size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="答案解析" prop="analysis">
                <el-input style="width: 450px;" v-model="form.analysis" placeholder="请输入" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
                <el-button @click="dialogVisible = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import CourseApi from '@/api/course.js';
import { ElMessage } from 'element-plus';
export default {
    data() {
        return {
            /*左边长度*/
            formLabelWidth: '70px',
            /*是否显示*/
            loading: false,
            /*是否显示*/
            dialogVisible: true,
            // 列表数据
            optionList: [
                {
                    label: '单选',
                    value: 1
                },
                {
                    label: '多选',
                    value: 2
                },
                {
                    label: '判断',
                    value: 3
                }
            ],
            // 大纲树
            treeData: [],
            tableData: [],
            tableType: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
            /*form表单对象*/
            form: {
                question_id: '',
                question_type: 1,
                outline_id: '',
                category_id: '',
                title: '',
                analysis: '',
            },
            radios: '',
            /*form验证*/
            formRules: {
                question_type: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    },
                ],
                outline_id: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    },
                ],
                category_id: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    },
                ],
                title: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    },
                ],
                analysis: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    },
                ],
            }
        };
    },
    props: ['targetForm'],
    created() {
        this.getTreeList()
    },
    methods: {
        // 添加选项
        addClick() {
            this.tableData.push({
                content: '',
                type: 1
            })
        },
        // 删除选项
        deleteClick(row) {
            this.tableData.splice(row.$index, 1)
        },
        // 类型变化
        typeChange(value) {
            this.tableData = []
            this.radios = ''
            if (value === 3) {
                this.tableData = [{ content: '正确', type: 1 }, { content: '错误', type: 1 }]
            }
        },
        getTreeList() {
            let self = this;
            let Params = {
                career_id: this.targetForm.career_id,
                level_id: this.targetForm.level_id,
                direction_id: this.targetForm.direction_id
            };
            CourseApi.getNestedData(Params, true)
                .then(data => {
                    self.treeData = data.data;
                    self.treeData && self.treeData.map(item => {
                        item.disabled = true
                        if (item.children && item.children.length > 0) {
                            item.children.map(childrenItem => {
                                childrenItem.disabled = true
                                return childrenItem
                            })
                        }
                        return item
                    })
                })
                .catch(error => { });
        },
        setTitle(data) {
            this.form.question_id = data.question_id;
            this.form.question_type = data.question_type;
            this.form.outline_id = data.outline_id;
            this.form.category_id = data.category_id;
            this.form.title = data.title;
            this.form.analysis = data.analysis;
            this.tableData = data.option
            if (this.form.question_type === 1 || this.form.question_type === 3) {
                this.radios = data.answer && data.answer[0]
            } else {
                this.tableData.map((item, index) => {
                    item.isSelect = data.answer && data.answer.indexOf(this.tableType[index]) > -1
                    return item
                })
            }
        },
        /*添加*/
        onSubmit() {
            if (!this.tableData || this.tableData.length < 2) {
                ElMessage({
                    message: '请添加至少两个选项',
                    type: 'error'
                });
                return false
            }
            let type = false
            this.tableData.forEach(item => {
                if (!item.content) {
                    type = true
                }
            })
            if (type) {
                ElMessage({
                    message: '请填写选项内容',
                    type: 'error'
                });
                return false
            }
            if ((this.form.question_type === 1 || this.form.question_type === 3) && !this.radios) {
                ElMessage({
                    message: '请选择答案',
                    type: 'error'
                });
                return false
            }
            this.$refs.form.validate(valid => {
                if (valid) {
                    let self = this;
                    self.loading = true;
                    let params = {
                        analysis: self.form.analysis,
                        category_id: self.form.category_id,
                        question_type: self.form.question_type,
                        title: self.form.title,
                    }
                    let option = []
                    let answer = []
                    self.tableData.forEach((item, index) => {
                        option.push({
                            content: item.content,
                            type: 1
                        })
                        if (item.isSelect) {
                            answer.push(this.tableType[index])
                        }
                    })
                    params.option = option
                    params.answer = this.form.question_type === 1 || this.form.question_type === 3 ? [self.radios] : answer
                    params.outline = this.$refs.outline_id.getCheckedNodes()[0].pathLabels.join('-')
                    params.outline_id = this.form.outline_id[2] || params.outline_id
                    params.difficulty = 0
                    params.sort = 0
                    params.option_type = 1
                    let key = 'addQuestion'
                    let msg = '新增成功'
                    if (self.form.question_id) {
                        params.question_id = this.form.question_id
                        key = 'echartsditQuestion'
                        msg = '编辑成功'
                    }
                    CourseApi[key](params, true)
                        .then(data => {
                            self.loading = false;
                            ElMessage({
                                message: msg,
                                type: 'success'
                            });
                            self.dialogFormVisible(true);
                        })
                        .catch(error => {
                            self.loading = false;
                        });
                }
            });
        },

        /*关闭弹窗*/
        dialogFormVisible(e) {
            if (e) {
                this.$emit('close', {
                    type: 'success',
                    openDialog: false
                });
            } else {
                this.$emit('close', {
                    type: 'error',
                    openDialog: false
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.el-form-item {
    margin-right: 20px;
}

.inline {
    width: 100%;
    height: 1px;
    background: #eee;
    margin-bottom: 20px;
}
</style>